<template>
  <div>
    <hr class="mb-2">
    <form>
      <div class="row">
        <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3" v-for="screening in screenings">
          <!--select-->
          <div class="input-group mb-2 mr-sm-2" v-if="screening.type==='select'">
            <div class="input-group-prepend">
              <div class="input-group-text">{{screening.label}}</div>
            </div>
            <select class="custom-select " ref="screening.name" title="" :name="screening.name" @change="setMap(screening.name,$event.target.value)">
              <option selected value>请选择{{screening.label}}</option>
              <option :value="option.value" v-for="option in screening.options" :selected="option.selected">
                {{option.title}}
              </option>
            </select>
            <small class="form-text text-muted">
              {{screening.remark}}
            </small>
          </div>
          <!--input-->
          <div class="input-group mb-2 mr-sm-2" v-else-if="screening.type==='input'">
            <div class="input-group-prepend">
              <div class="input-group-text">{{screening.label}}</div>
            </div>
            <input type="text" class="form-control" :placeholder="'请输入'+screening.label" title="" :name=screening.name :value="screening.value" @change="setMap(screening.name,$event.target.value)">
            <small class="form-text text-muted">
              {{screening.remark}}
            </small>
          </div>
        </div>
      </div>
    </form>
    <hr class="mt-0">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        maps: {},
      };
    },
    props: {
      screenings: {
        type: Array,
        required: true,
      },
      callBackFunction: {
        type: Function,
        required: true,
      },
    },
    methods: {
      initMap() {
        for (let v of this.screenings) {
          if (v.type === "select") {
            for (let vOption of v.options) {
              if (vOption.selected === true) {
                this.maps[v.name] = vOption.value;
              }
            }
          } else if (v.type === "input") {
            this.maps[v.name] = v.value
          }
        }
        
      },
      setMap(a, b) {
        this.maps[a] = b;
        this.callBackFunction(dealObjectValue(this.maps));
      },
    },
    mounted() {
      this.initMap();
      this.callBackFunction(dealObjectValue(this.maps));
    },
  }
</script>

<style scoped>
</style>
